<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <!--<button ion-button icon-only>
        <ion-icon name="chatboxes"></ion-icon>
          <ion-badge>3</ion-badge>
      </button>-->
      <button ion-button icon-only [ngClass]="{ 'hidden' : global.curMode== 'OFFLINE_MODE' }">
        <ion-icon name="wifi"></ion-icon>
      </button>
      <button ion-button icon-only [ngClass]="{ 'hidden' : global.curMode== 'ONLINE_MODE' }">
        <ion-icon name="information-circle"></ion-icon>
      </button>
      <button ion-button icon-only (click)="openTable('newTable')">
        <!--<ion-icon name="apps"></ion-icon>-->
        <img class="navbar-icon" src="assets/img/table.png"/>
      </button>
      <!--<button ion-button icon-only (click)="setTable(0)">
        <img class="navbar-icon" src="assets/img/2.0icon/icon-nav/takeaway.png"/>
      </button>
      <button ion-button icon-only>
        <ion-icon name="qr-scanner"></ion-icon>
      </button>-->
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content no-bounce>
  <super-tabs scrollTabs *ngIf="categoryList">
    <super-tab *ngFor="let category of categoryList" [root]="productListPage" [rootParams]="category" title="{{ category.name }}"></super-tab>
  </super-tabs>
</ion-content>

<ion-footer class="order-summary" [ngClass]="{ 'expanded': !summaryCollapsed }">
  <button class="toggle-button" ion-button color="white" small full (click)="toggleSummary()">
    <i class="fa fa-caret-up" *ngIf="summaryCollapsed"></i>
    <i class="fa fa-caret-down" color="white" *ngIf="!summaryCollapsed"></i>
  </button>
  <div class="order-header">
    <ion-row>
      <ion-col col-8>
        <ion-row>
          <ion-col col-12 (click)="toggleCurTab('order')">
            <div class="order-title" [ngClass]="{ 'active-tab': global.curTab=='order'}">
              <i class="fa fa-star-o"></i> {{ 'CURRENT_ORDER' | translate }}
            </div>
          </ion-col>
          <ion-col col-6>
            <button class="order-waiter" ion-button clear full>
              <i class="fa fa-user-circle-o"></i> {{ global.curCart.customer_name }}
            </button>
          </ion-col>
          <ion-col col-6>
            <button class="order-type" ion-button clear full (click)="openTable('switchTable')">
              <div class="item-photo" *ngIf="global.curCart.table_num != 0"><img src="assets/img/2.0icon/icon-nav/dinein.png" /></div>
              <div class="item-photo" *ngIf="global.curCart.table_num == 0 && global.curCart.delivery_type == 'pick up'"><img src="assets/img/2.0icon/icon-nav/pickup.png" /></div>
              <div class="item-photo" *ngIf="global.curCart.table_num == 0 && global.curCart.delivery_type != 'pick up'"><img src="assets/img/2.0icon/icon-nav/takeaway.png" /></div>
              <div *ngIf="global.curCart.table_num != 0">{{ 'TABLE_NO' | translate }}:{{ global.curCart.table_num }}</div>
              <div *ngIf="global.curCart.table_num == 0 && global.curCart.invoice_no">#{{ global.curCart.invoice_no | slice:-4 }}</div>
              <div *ngIf="global.curCart.table_num == 0 && !global.curCart.invoice_no">{{ 'TAKE_AWAY' | translate }}</div>
            </button>
          </ion-col>
        </ion-row>
      </ion-col>
      <ion-col col-4 (click)="toggleCurTab('serving')">
        <div class="order-status" [ngClass]="{ 'active-tab': global.curTab=='serving'}">
          <i class="fa fa-check-circle-o"></i> {{ 'SERVING' | translate }}
        </div>
      </ion-col>
    </ion-row>
  </div>
  <ion-content class="order-items" [ngClass]="{ 'hidden': summaryCollapsed }">
    <ion-list [hidden]="global.curTab=='serving'">
      <ion-refresher (ionRefresh)="loadCart(global.curCart.id,$event);" *ngIf="global.curTab=='order'">
        <ion-refresher-content pullingIcon="arrow-dropdown" refreshingSpinner="circles"></ion-refresher-content>
      </ion-refresher>
      <p class="lowlight text-center" style="overflow: hidden; text-align: center; font-size: 20px;margin-top: 70px;" *ngIf="global.curCart.products.length==0">
        {{ 'THIS_CART_IS_EMPTY' | translate}}
      </p>
      <ion-item-sliding *ngFor="let item of global.curCart.products" #row>
        <button ion-item [ngClass]="{
            'item-status-ordered': item.served == 0,
            'item-status-preparing': item.served == 2,
            'item-status-served': item.served == 1
          }" (click)="editCartItem(item)">
          <div class="item-photo"><img src="{{ item.photo }}" /></div>
          <div class="item-detail">
            <div>{{ item.name }}</div>
            <div class="text-lowlight text-small"></div>
          </div>
          <div class="item-qty">x {{ item.qty }}</div>
          <div class="item-price">${{ item.sub_total * item.qty | number: '1.1-1' }}</div>
        </button>
        <ion-item-options side="left">
          <button ion-button color="danger" (click)="slideChooseServe(item,serveStatus[0])">{{ 'ORDERED' | translate }}</button>
          <button ion-button color="warning" (click)="slideChooseServe(item,serveStatus[2])">{{ 'PREPARING' | translate }}</button>
          <button ion-button color="success" (click)="slideChooseServe(item,serveStatus[1])">{{ 'SERVED' | translate }}</button>
        </ion-item-options>
        <ion-item-options side="right">
          <button ion-button color="red" (click)="voidCartItem(item)"><i class="fa fa-trash"></i></button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>

    <ion-list [hidden]="global.curTab=='order'">
      <ion-refresher (ionRefresh)="loadServingList('refresh',$event)" *ngIf="global.curTab=='serving'">
        <ion-refresher-content pullingIcon="arrow-dropdown" refreshingSpinner="circles"></ion-refresher-content>
      </ion-refresher>
      <ion-item *ngFor="let serving of servingList">
        <ion-row class="serving-list">
          <div class="serving-list-item" style="width:100%; border-bottom:0px;" (click)="loadServingCart(serving)">
            <div class="item-photo" *ngIf="serving.table_num != 0"><img src="assets/img/2.0icon/icon-nav/dinein.png" /></div>
            <div class="item-photo" *ngIf="serving.table_num == 0&&serving.delivery_type=='pick up'"><img src="assets/img/2.0icon/icon-nav/pickup.png" /></div>
            <div class="item-photo" *ngIf="serving.table_num == 0&&serving.delivery_type!='pick up'"><img src="assets/img/2.0icon/icon-nav/takeaway.png" /></div>
            <div><i class="fa fa-money" style="font-size:26px;margin-left:10px;" [ngClass]="{ 'text-primary' : serving.payed_amount > 0 ,'text-dark' : serving.payed_amount == 0  }"></i></div>
            <div class="serving-list-item-time">
              <div *ngIf="serving.table_num != 0">{{ 'TABLE_NO' | translate }}:{{ serving.table_num }}</div>
              <div *ngIf="serving.table_num == 0 && serving.invoice_no">#{{ serving.invoice_no | slice:-4 }}</div>
              <div *ngIf="serving.table_num == 0 && !serving.invoice_no">{{ 'TAKE_AWAY' | translate }}</div>
              <div>
                <span class="text-lowlight text-small marg-right">{{ serving.invoice_date | date:'shortTime' }}</span>
                <span class="text-primary text-small">{{ serving.timeSpan }}</span>
              </div>
            </div>
            <div class="serving-list-item-seat">
              {{ 'QTY' | translate }}:{{ serving.served_qty }}
            </div>
            <div class="serving-list-item-price">
              <div class="text-primary text-big">${{ serving.price | number: '1.1-1' }}</div>
              <div class="text-lowlight text-small">{{ serving.name }}</div>
            </div>
          </div>
        </ion-row>
      </ion-item>
      <!--<ion-infinite-scroll (ionInfinite)="loadServingList('more',$event)" *ngIf="servingList.length != servingListCount">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>-->
    </ion-list>
  </ion-content>
  <div class="order-control">
    <button ion-button clear small (click)="clearCart()">
      <i class="fa fa-repeat"></i>
      <div>{{ 'CLEAR_' | translate}}</div>
    </button>
    <button ion-button clear small (click)="gotoPrintOrder()">
      <i class="fa fa-print"></i>
      <div>{{ 'PRINT_ORDER' | translate}}</div>
    </button>
    <!--<button ion-button clear small>
      <i class="fa fa-comments"></i>
      <div>Notice</div>
    </button>-->
    <button ion-button clear small (click)="saveCart()">
      <i class="fa fa-pause"></i>
      <div>{{ 'HOLD' | translate}}</div>
    </button>
    <!--<button ion-button clear small (click)="processCheckOut('receipt')">
      <i class="fa fa-print"></i>
      <div *ngIf='global.curCart.payed_amount > 0'>{{ 'PRINT_RECEIPT' | translate}}</div>
      <div *ngIf='global.curCart.payed_amount == 0'>{{ 'PRINT_INVOICE' | translate}}</div>
    </button>-->
  </div>
</ion-footer>